# Viewports

The Puck preview renders in a same-origin iframe that can be resized to simulate different viewports.

## Default viewports

Puck provides 3 viewports [by default](/docs/api-reference/components/puck#default-viewports):

1. Small: 360px wide
2. Medium: 768px wide
3. Large: 1280px wide

Each of the default viewports have 100% height, filling the available space (via the `auto` height parameter).

## Customizing viewports

Customizing the available viewports using the [`viewports` API](/docs/api-reference/components/puck#viewports):

```tsx
export function Editor() {
  return (
    <Puck
      viewports={[
        {
          width: 1440,
          height: "auto", // Optional height. Can be numeric or "auto". Defaults to "auto".
          label: "My Viewport", // Optional. Shown in tooltip.
          icon: <svg />, // Optional. Use lucide-icons to align with Puck UI.
        },
      ]}
      // ...
    />
  );
}
```

## Opting out of iframes

Opt-out of iframe rendering by using the [`iframe` API](/docs/api-reference/components/puck#iframe):

```tsx
export function Editor() {
  return (
    <Puck
      iframe={{
        enabled: false,
      }}
      // ...
    />
  );
}
```

This will disable all viewport functionality.

## Controlling viewports with compositional interfaces

When implementing a [compositional interface](/docs/extending-puck/composition), the `viewports` API will have no effect. Instead, the viewport size can be controlled by the dimensions of the wrapping element that contains [`<Puck.Preview />`](/docs/api-reference/components/puck-preview).

CSS transforms can be used to zoom the viewport without impacting drag-and-drop behaviour.

```tsx {6-8}
import { Puck } from "@measured/puck";

export function Editor() {
  return (
    <Puck>
      <div style={{ transform: "scale(0.5)", width: 1280 }}>
        <Puck.Preview />
      </div>
    </Puck>
  );
}
```
